import Vue from 'vue'
import '@/assets/style/index.css'
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/icon/iconfont.css'
import PerfectScrollbar from "perfect-scrollbar";
import 'perfect-scrollbar/css/perfect-scrollbar.css';
import 'nprogress/nprogress.css'
import Nprogress from 'nprogress'

Nprogress.configure({showSpinner: false})

Vue.directive('perfectScrollbar', {
    inserted(el, binding) {
        const ps = new PerfectScrollbar(el, {
            suppressScrollY: false, // 禁止滚动条垂直滚动
            wheelSpeed: 1.5, // 控制滚轮滚动速度
            suppressScrollX: true,  // 抑制水平滚动条
            // suppressScrollY: false,  // 抑制垂直滚动条
            // 滚动条样式
            // scrollXMargin: 0,        // 水平滚动条边距
            // scrollYMargin: 0,        // 垂直滚动条边距
            // useBothWheelAxes: false, // 允许水平和垂直滚轮同时滚动
            // 高级配置
            // swipePropagation: true,  // 允许触摸滑动传播
            // usePassiveEvents: true,  // 使用 passive 事件监听器
            // scrollingThreshold: 1000 // 滚动事件触发阈值（毫秒）
        });

        // 添加过渡监听
        el.addEventListener('transitionend', () => {
            ps.update()
        })

        // 存储实例和监听器
        el._perfectScrollbar = {
            instance: ps,
            transitionHandler: () => ps.update()
        }
    },

    update(el, binding) {
        if (!el._perfectScrollbar) return

        // 防抖处理
        clearTimeout(el._perfectScrollbar.updateTimer)
        el._perfectScrollbar.updateTimer = setTimeout(() => {
            el._perfectScrollbar.instance.update()
        }, 500) // 匹配菜单过渡时间
    },
    unbind(el) {
        if (el._perfectScrollbar) {
            const {instance, transitionHandler} = el._perfectScrollbar
            // 销毁实例
            instance.destroy()
            // 移除监听
            el.removeEventListener('transitionend', transitionHandler)
            // 清理引用
            delete el._perfectScrollbar
        }
    }
})

